<template>
  <div class="app-container">
    <el-table :data="data" fit border style="width: 100%">
      <!-- 序号 -->
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <!-- 项目名称 -->
      <el-table-column label="项目名称" align="center">
        <template slot-scope="scope">
          <a :href="scope.row.url" class="projectA" target=" _blank">{{
            scope.row.name }}</a>
        </template>
      </el-table-column>

      <!-- 项目描述 -->
      <el-table-column label="项目描述" align="center">
        <template slot-scope="scope">
          {{ scope.row.description.toString() }}
        </template>
      </el-table-column>

      <!-- 预览图 -->
      <el-table-column label="预览图" align="center">
        <template slot-scope="scope">
          <el-image fit style="width:80px;" :preview-src-list="srcList" :src="scope.row.thumb"></el-image>
        </template>
        <!-- 测试静态图片 -->
        <!-- <template slot-scope="scope">
          <el-image fit style="width:80px;" :preview-src-list="srcList"
            src="https://s1.aigei.com/src/img/gif/c6/c65dcaf9f7d94993a42b6587b9b2afd0.gif?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/%7CimageView2/2/w/282&e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:zqOM776mAoCyfv7OgwnUWMYYPqg="></el-image>
        </template> -->
      </el-table-column>

      <!--      操作-->
      <el-table-column prop="description" width="160" label="操作" align="center">
        <!--【删除】和【编辑】和【github】 按钮-->
        <template slot-scope="scope">
          <!-- 【GitHub】 -->
          <el-tooltip class="item" effect="dark" content="去往GitHub" placement="top" :hide-after=1200>
            <el-button type="primary" icon="iconfont icon-github" class="github" circle size="mini"
              @click="githubProject_Handle(scope.row)"></el-button>
          </el-tooltip>
          <!-- 【编辑】 -->
          <el-tooltip class="item" effect="dark" content="编辑" placement="top" :hide-after=1200>
            <el-button type="primary" icon="el-icon-edit" size="mini" circle
              @click.prevent="editProject_Handle(scope.row)"></el-button>
          </el-tooltip>
          <!-- 【删除】 -->
          <el-tooltip class="item" effect="dark" content="Delete" placement="top" :hide-after=1200>
            <el-button type="danger" icon="el-icon-delete" size="mini" circle
              @click.prevent="deleteProject_Handle(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 打开后的 dialog -->
    <el-dialog fullscreen :visible.sync="dialogFormVisible">
      <h1 style="position: absolute; top:-10px;">可修改项目内容</h1>
      <el-form :model="form">
        <!-- 项目名称 -->
        <el-form-item label="项目名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 项目描述 -->
        <el-form-item label="项目描述（每一项描述以英文逗号隔开）">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 项目链接 -->
        <el-form-item label="项目链接">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <!-- github地址 -->
        <el-form-item label="GitHub地址">
          <el-input v-model="form.github" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 预览图地址 -->
        <el-form-item label="预览图（点击修改）">
          <Upload v-model="form.thumb" />
        </el-form-item>
        <!-- 排序等级 -->
        <el-form-item label="排序等级">
          <el-select v-model="form.order" placeholder="分类等级">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 右下角按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureEditObjectInfo_Handle">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as project_API from "@/api/project"
import { URL_CONFIG } from "@/urlConfig.js"
import GitHub from "@/icons/svg/github-fill.svg"
import Upload from "@/components/UpLoad"
export default {
  data() {
    return {
      data: [],
      loading: false,
      srcList: [],
      form: {
        description: '',
        id: '',
        name: '',
        url: '',
        github: '',
        order: '',
        thumb: ''
      },
      dialogFormVisible: false,
      select: '1',
    }
  },
  components: {
    Upload
  },
  created() {
    this.fetchProjectData_Handle()
  },
  methods: {
    // 验证正则表达式
    isLeg(url) {
      let reg = /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/[a-zA-Z0-9-._~:/?#[\]@!$&'()*+,;=]*)?$/;
      return reg.test(url)
    },

    async fetchProjectData_Handle() {
      this.loading = true
      const { data } = await project_API.getProject()
      this.data = data
      this.loading = false
      console.log(data, '在项目列表开始拿数据jjjjjjjjjjjjjjjjjjjjjjj');

      for (const item of this.data) {
        // console.log(item.thumb, '1111');
        // item.thumb2 = URL_CONFIG + item.thumb
        this.srcList.push(item.thumb)
        // console.log(this.srcList, '222');
      }
    },
    // 【github】
    githubProject_Handle(data) {
      console.log('github', data);
      window.open(data.github)
    },
    // 【edit编辑project】
    editProject_Handle(data) {
      console.log('编辑project', data, this.form);
      this.form = { ...data }
      this.form.description = data.description.toString()
      this.dialogFormVisible = true
    },
    // 【删除】
    deleteProject_Handle(data) {
      console.log('删除', data);
      this.$confirm(`此操作将永久删除【${data.name}】项目, 是否继续?`, `【${data.name}】项目`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await project_API.deleteProject(data.id)
        this.fetchProjectData_Handle() //跟新数据
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 【确定修改信息】
    async sureEditObjectInfo_Handle() {
      console.log('确定修改信息,调用 putProject API', this.form);
      let obj = { ...this.form }
      obj.description = this.form.description.split(',')
      obj.order = parseInt(this.form.order)

      // if (!this.isLeg(obj.url)) { //【通过url地址验证】
      //   this.$message.error('项目链接 不是有效地址！')
      // } else if (!this.isLeg(obj.github)) {
      //   this.$message.error('GitHub 链接不是有效地址！')
      // } else {
      //   await project_API.putProject(obj.id, obj)
      //   this.fetchProjectData_Handle()
      //   this.$message.success('修改成功')
      //   this.dialogFormVisible = false
      // }
      // 【优化上面代码】
      if (obj.url && !this.isLeg(obj.url)) {
        this.$message.error('项目链接 不是有效地址！')
      } else if (obj.github && !this.isLeg(obj.github)) {
        this.$message.error('GitHub 链接不是有效地址！')
      } else {
        // 所有非空字段都有效，执行提交
        await project_API.putProject(obj.id, obj)
        this.fetchProjectData_Handle()
        this.$message.success('修改成功')
        this.dialogFormVisible = false
      }
    }
  }
}
</script>

<style scoped>
.projectA {
  width: 100%;
  height: 100%;
  display: inline-block;

}

.github {
  background-color: #787878;
  border: 1px solid #787878;
}

.projectA:hover {
  color: #409eff;
}
</style>
